<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul {
			list-style:none;
		}
		#tab , #content{
			margin: 0 auto;
			display: block;
			width: 300px;
			overflow: hidden;
		}
		#tab li{
			float: left;
			width: 98px;
			height: 30px;
			line-height: 30px;
			color:  #333;
			text-align: center;
			border:1px solid red;
			border-right:none;
			cursor: pointer;
		}
		#tab li:last-child{
			border-right:1px solid red;
		}
		#tab li.cur{ 
			background: orange;
		}
		#content li{
			display: none;
			float: left;
			width: 296px;
			height: 100px;
			min-height: 100px;
			border:1px solid red;
			border-top:none;
		}
		#content li.cur{
			display: block;
		}
		
	</style>
</head>
<body>
	<ul id="tab">
		<li class="cur">图片</li>
		<li>专栏</li>
		<li>热点</li>
	</ul>
	<ul id="content">
		<li class="cur">图片内容</li>
		<li>专栏内容</li>
		<li>热点内容</li>
	</ul>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		 var tabLis = $('#tab li')
		 var contentLis = $('#content li')

		 tabLis.click(function(){
		 	// console.log($(this))
		 	// 先设置tab的变化
		 	$(this).siblings().removeClass('cur')
		 	$(this).addClass('cur')
		 	// 获取当前元素在li数组中的下标
		 	var index = $(this).index()
		 	// console.log($(this).index())
		 	// 根据下标tab下面第n个元素的下标获取对应的content下面第n个元素
		 	$curContent = contentLis.eq(index)
		 	// 再设置content的变化
		 	$curContent.siblings().removeClass('cur')
		 	$curContent.addClass('cur')

		 })

	</script>
</body>
</html>